<template>
	<view class="bg" :style="{backgroundImage:'url('+imagesurl+'/images/buycoupond_bg.png)'}">
		<view class="content">
			<view class="c_bg" :style="{backgroundImage:'url('+imagesurl+'/images/counpondbg.png)'}">
				<view class="c_bg_1">
					<view>
						<text>￥</text><text class="price">{{info.price}}</text>
					</view>
					<view style="margin-left: 20rpx;line-height: 50rpx;">
						<view>元代金券</view>
						<view class="day">有效期{{info.day}}天</view>
					</view>
				</view>
				<view class="des">{{info.des}}</view>
			</view>
			<view class="number">
				当前可用代金券{{info.number}}张
			</view>
			<u-button shape="circle"
				:custom-style="{background:'#FF6450',color:'#fff',marginTop:'40rpx',width:'500rpx'}" @click="buy(0)">购买代金券
			</u-button>
		</view>
		
	     <Success :isSucess="isSucess" :title="title" :des="des" :detail="detail" :btnTxt="btnTxt" :img="img" :btnTxt2="btnTxt2"></Success>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import Success from '../../pages/teamAtive/components/success.vue';
	import payway from '../../common/wxpay.js';
	import url from '@/common/baseUrl.js';
	export default {
		components: {
			Success,
			
		},
		data() {
			return {
				imagesurl: url.imageUrl,
				info: {
					price: "",
					day: "",
					des: "可用于购物抵现，参与拼团活动",
					number: "",
					content: ""

				},
				isSucess:false,
				title:"",
				btnTxt:"",
				detail:"",
				couponNum:"",
				btnTxt2:""

			}
		},
		onLoad() {
			this.get()
			
		},
		onShow(){
			this.infor()
		},
		methods: {
			infor(){
			  this.$u.post('/api/user/information', {
			  	
			  }, {}).then(res => {
		             this.info.number=res.data.voucherNum;
					 this.couponNum=res.data.couponNum
					 if(res.data.couponNum){
						   //抵扣券数量
						   this.isSucess=true
						   this.title = "代金抵扣券";
						   this.btnTxt = "抵扣付款";
						   this.btnTxt2="直接购买";
						   this.detail = "使用代金抵扣券付款可抵扣5.00元哦";					   
					 }
			  }).catch(err => {})
			},
			get() {
				this.$u.post('/api/index/getCommission', {

				}, {}).then(res => {
					this.info.price = Number(res.data.buyVoucherMoney).toFixed(2);
					this.info.day = Number(res.data.buyVoucherMoney);

				}).catch(err => {})
			},
			// cbuy(){
			// 	if(this.couponNum){		
			// 		uni.showModal({
			// 			title:"提示",
			// 			content:"使用代金抵扣券付款可抵扣5.00元哦",
			// 			confirmText:"使用",
			// 			cancelText:"直接付款",
			// 			success:(res)=>{
			// 				if(res.confirm){
			// 					//使用
			// 					this.buy(1)
			// 				}else{
			// 					this.buy()
			// 				}
			// 			}
			// 		})
			// 	   return	 
			// 	}
			// 	this.buy()
			// },
			
			buy(item) {		
				console.log(item)
				this.$u.post('/api/indent/voucher', {
					use_coupon:item?1:0
				}, {}).then(res => {
					var packages = res.data.package;
					var {
						noncestr,
						timestamp,
						signtype,
						paysign
					} = res.data
					payway.wx(timestamp, noncestr, packages, signtype, paysign).then(res => {
						this.$refs.uToast.show({
							title: '购买成功',
							type: 'success',
						})
						 uni.navigateTo({
						 	url:"/pages/teamAtive/index"
						 })
						 
						 
                         this.infor()
					}).catch(err => {

					})

				}).catch(err => {})

			}
		}
	}
</script>

<style lang="scss">
	.bg {

		width: 100%;
		min-height: 100%;
		background-size: cover;
		display: inline-block;
	}

	.content {
		width: 690rpx;
		height: 600rpx;
		background: #FFFFFF;
		margin: auto;
		padding: 40rpx 0;
		margin-top: 420rpx;

		.number {
			font-size: 28rpx;
			color: #628DFF;
			text-align: center;
			margin: 50rpx 0 20rpx 0;
		}
	}

	.c_bg {

		width: 600rpx;
		height: 300rpx;
		background-size: cover;
		margin: auto;

		padding: 40rpx 60rpx;
		color: #FFFFFF;

		.c_bg_1 {
			display: flex;
			align-items: center;
		}

		.price {
			font-size: 120rpx;
		}



		.des {
			width: 460rpx;
			height: 55rpx;
			margin: auto;
			color: #A65A00;
			background: #FAE205;
			line-height: 55rpx;
			font-size: 24rpx;
			text-align: center;
			font-weight: bold;
		}
	}
</style>
